<script>
// 定义组件状态使用 ref 函数
import { ref } from 'vue';
export default {
  // 组件的相关初始化写在 setup 函数中
  setup() {
    // 定义图片隐藏和显示需要的数据和方法
    const show = ref(true);
    const toggle = () => {
      // 修改数据
      show.value = !show.value;
    };

    // 定义计数器需要的数据和方法]
    const count = ref(0);
    const increment = () => {
      count.value += 1;
    };

    // 将定义的数据、方法等返回给组件
    return { show, toggle, count, increment };
  },
};
</script>

<template>
  <!--  事件绑定和数据绑定和原来 vue2 语法一致  -->
  <img v-show="show" alt="Vue logo" src="/vite.svg" />
  <button @click="toggle">显示隐藏图片</button>
  <hr />
  <h2>计数器：{{ count }}</h2>
  <button @click="increment">累加</button>
</template>
